<template>
  <div v-if="false" class="detail">
    <!-- 导航栏 -->
    <div class="header" :class="[isShow || showMoreComment ? 'header1' : '']" :style="headerOpacity">
      <div class="back bg50" @click="backClick"></div>
      <div v-if="isShow && !showMoreComment" class="tabs">
        <a
          v-for="(item,index) in tabsList" 
          @click="tabsItemClick(index)"
          :href="'#' + item.herfUrl"
          :class="[activeIndex === index ? 'active' : '']"
          :key="item.herfUrl">
          {{item.name}}
        </a>
      </div>
      <div class="title" v-if="!isShow && showMoreComment">评价</div>
      <div class="more bg50" @click="showMenuBtnClick"></div>
    </div>
    <div v-if="showMenu" class="headerMenu">
      <div
        v-for="(item,index) in ['首页','搜索','分类','购物车','我的']" 
        @click="menuItemClick(index)"
        :key="item">
        <span></span><label>{{item}}</label>
      </div>
    </div>
    <div v-if="!showMoreComment" class="content" id="contentInfo">
      <!-- 商品轮播图 -->
      <swiper class="swiper" :options="swiperOption">
    　　<swiper-slide v-for="item in swiperList" :key="item.id">
          <img :src="item.url" />
        </swiper-slide>
      </swiper>
      <div class="product">
        <!-- 产品信息 -->
        <div class="baseInfo">
          <!-- 价格行 -->
          <div class="line_price">
            <div class="left">
              <div class="price"><span>¥</span>2999</div>
              <div class="old_price">
                <div class="tag">限时特惠</div>
                <div class="num">¥3199</div>
              </div>
            </div>
            <div class="right">
              <div class="name">距结束还剩</div>
              <div class="time">
                <div class="day">{{countTimeObj.day}}</div>
                <div class="hour">{{countTimeObj.hour}}</div>
                <div class="dot">:</div>
                <div class="min">{{countTimeObj.min}}</div>
                <div class="dot">:</div>
                <div class="sec">{{countTimeObj.sec}}</div>
              </div>
            </div>
          </div>
          <!-- 大标题行 -->
          <div class="line_title">
            <div class="title">荣耀30 50倍超稳远摄 超感光高清夜拍 40W超级快充 双模5G 8GB+128GB 钛空银</div>
            <div class="prom">新低价！【现货速发】：①最高优惠210元，到手价2989元②享12期免息③会员限量赠耳机④下单使用5000以内积分可双倍抵现</div>
          </div>
          <!-- 优惠券 -->
          <div class="line_right">
            <div class="title">领券</div>
            <div class="center couponList">
              <div class="item" v-for="item in 2" :key="item">领券直减10</div>
            </div>
            <div class="more"></div>
          </div>
          <!-- 促销 -->
          <div class="line_right bottomBorderNone">
            <div class="title">促销</div>
            <div class="center cuxiaoList">
              <div class="item">
                <div class="tag"><span>限时特价</span></div>
                <div class="text">限时直降200元</div>
              </div>
              <div class="item">
                <div class="tag"><span>一站式换新</span></div>
                <div class="text">APP专享，最高补贴300元</div>
              </div>
              <div class="item">
                <div class="tag"><span>限量送</span></div>
                <div class="tag"><span>会员限量送</span></div>
                <div class="tag"><span>积分双倍抵现</span></div>
              </div>
            </div>
            <div class="more"></div>
          </div>
          <div class="specLine"></div>
          <!-- 颜色 -->
          <div class="line_right bottomBorderNone colors">
            <div class="title">颜色</div>
            <div class="center colorsList">
              <div class="item"
              v-for="item in ['幻夜黑','绿野仙踪','钛空银','霓影紫','流光幻镜']" 
              :class="[item === '绿野仙踪' ? 'active' : '']"
              :key="item">{{item}}</div>
            </div>
          </div>
          <!-- 版本 -->
          <div class="line_right bottomBorderNone colors">
            <div class="title">版本</div>
            <div class="center colorsList">
              <div class="item" 
              v-for="item in ['6GB+128GB','8GB+128GB','8GB+256GB']" 
              :class="[item === '8GB+128GB' ? 'active' : '']"
              :key="item">全网通 {{item}}</div>
            </div>
          </div>
          <!-- 类型 -->
          <div class="line_right bottomBorderNone colors">
            <div class="title">类型</div>
            <div class="center colorsList">
              <div class="item" 
              v-for="item in ['官方标配']" 
              :class="[item === '官方标配' ? 'active' : '']"
              :key="item">{{item}}</div>
            </div>
          </div>
          <!-- 套餐 -->
          <div class="line_right bottomBorderNone colors">
            <div class="title">套餐</div>
            <div class="center colorsList">
              <div class="item" 
              v-for="item in ['单品','音乐套餐一','音乐套餐二']" 
              :class="[item === '单品' ? 'active' : '']"
              :key="item">{{item}}</div>
            </div>
          </div>
          <!-- 数量 -->
          <div class="line_right">
            <div class="title">数量</div>
            <div class="center setNum">
              <div class="btn minus" :class="[goodsNum === 1 ? 'disable' : '']" @click="numBtnClick('minus')"></div>
              <div class="num">{{goodsNum}}</div>
              <div class="btn add" :class="[goodsNum === 20 ? 'disable' : '']" @click="numBtnClick('add')"></div>
            </div>
          </div>
          <!-- 保障 -->
          <div class="line_right">
            <div class="title">保障</div>
            <div class="center baozhangList">
              <div class="tips">选购</div>
              <div class="item" v-for="item in ['碎屏保','延长保']" :key="item">{{item}}</div>
            </div>
            <div class="more"></div>
          </div>
          <!-- 免息 -->
          <div class="line_right bottomBorderNone">
            <div class="title">免息</div>
            <div class="center mianxi">掌上生活/花呗分期直购，最高享12期免息</div>
            <div class="more"></div>
          </div>
          <div class="specLine"></div>
          <!-- 搭配 -->
          <div class="line_right bottomBorderNone dapei">
            <div class="title">搭配</div>
            <div class="center dapeiList">
              <div class="item" v-for="item in 4" :key="item">
                <img src="https://res.vmallres.com/pimages//product/6901443376216/142_142_226F2A2E8F253CE518F62D24B5E3145D666917F02576C263mp.jpg" />
                <div><span>省40</span></div>
              </div>
            </div>
            <div class="more2"></div>
          </div>
          <div class="specLine"></div>
          <!-- 服务 -->
          <div class="line_right bottomBorderNone service">
            <div class="title">服务</div>
            <div class="center serviceList">
              <div class="item">已满48元包邮</div>
              <div class="item">由华为终端提供商品、发货开票及售后服务</div>
            </div>
            <div class="more"></div>
          </div>
          <div class="specLine"></div>
          <!-- 推荐 -->
          <div class="line_right bottomBorderNone recommend">
            <div class="title">推荐</div>
            <div class="center recommendList">
              <div class="item">荣耀30S</div>
              <div class="item">荣耀30S Pro</div>
            </div>
          </div>
          <div class="specLine"></div>
        </div>
        <!-- 产品评价 -->
        <div class="commentInfo" id="commentInfo">
          <div class="line_title">
            <div class="title">用户评价（13189）</div>
            <div class="goodRatebox" @click="moreClick">
              <div class="num"><span>98%</span>好评</div>
              <div class="more"></div>
            </div>
          </div>
          <div class="commentList">
            <CommentItem  v-for="(item,index) in commentInfo.comments" v-show="index <= 4" :key="item.commentId" :commentObj="item" />
            <div class="comment_more">
              <div class="see_more" @click="moreClick">
                <div class="icon"></div>
                <div class="text">查看更多</div>
              </div>
            </div>
          </div>
          <div class="moreBtns">
            <div class="btn" @click="moreClick">查看全部评价</div>
            <div class="btn" @click="moreClick">购买咨询(86)</div>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="specLine">
          <div class="line"></div>
        </div>
        <!-- 参数 -->
        <div class="canshuInfo" id="canshuInfo">
          <div class="headTitle">规格参数</div>
          <div class="canshuBox">
            <div class="line" v-for="item in showContent" :key="item.name">
              <div class="name">{{item.name}}</div>
              <div class="value" v-html="item.value + '(备注：' + item.remark + ')'"></div>
            </div>
          </div>
          <div class="mask"></div>
          <div class="moreInfo">查看全部参数</div>
        </div>
        <!-- 产品详情 -->
        <div class="detailInfo" id="detailInfo" v-html="prdDetailInfo"></div>
      </div>
    </div>
    <CommentList v-else :commentInfo="commentInfo" />
    <div class="bottomArea">
      <div class="linkBtns">
        <div class="home">首页</div>
        <div class="service">客服</div>
        <div class="shoppingCart">购物车</div>
      </div>
      <div class="actionBtns">
        <div class="addCart">加入购物车</div>
        <div class="buyNow">立即购买</div>
      </div>
    </div>
  </div>
  <Attributes v-else :specificationsList="specificationsList" />
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css';
import CommentItem from './commentItem'
import CommentList from './commentList'
import Attributes from './attributes'
export default {
  name: 'detail',
  components: {
    swiper,
    swiperSlide,
    CommentItem,
    CommentList,
    Attributes
  },
  data () {
    return {
      isShow: false,
      headerOpacity: {},
      tabsList: [
        {
          id: 1,
          herfUrl: 'contentInfo',
          name: '商品'
        },
        {
          id: 2,
          herfUrl: 'commentInfo',
          name: '评价'
        },
        {
          id: 3,
          herfUrl: 'canshuInfo',
          name: '参数'
        },
        {
          id: 4,
          herfUrl: 'detailInfo',
          name: '详情'
        }
      ],
      activeIndex: 0,
      showMenu: false,
      swiperOption: {
        direction : 'horizontal',
    　  pagination: {
  　　　　 el: '.swiper-pagination',
  　　　　 clickable: true, // 允许点击小圆点跳转
          bulletClass: 'bulletClass1',
          bulletActiveClass: 'bulletActiveClass1'
    　　},
    　　autoplay: {
    　　　　delay: 3000,
    　　　　disableOnInteraction: false 
    　　},
    　　loop: true,
      },
      swiperList: [
        {
          id: '1',
          url: 'https://res.vmallres.com/pimages//product/6901443391943//428_428_5FCE0D08D969B6FEA3D8A1724EF92AC5D996215FCACD0EC6mp.png'
        },
        {
          id: '2',
          url: 'https://res.vmallres.com/pimages//product/6901443391943/group//428_428_96F524054AB60C8C63E71C567D5C9467ED20B3973570B1DE.png'
        },
        {
          id: '3',
          url: 'https://res.vmallres.com/pimages//product/6901443391943/group//428_428_5764160B1C02911C5D734A0AE4AD908D2C0993A1233023AF.png'
        },
        {
          id: '4',
          url: 'https://res.vmallres.com/pimages//product/6901443391943/group//428_428_526FD7A3243232BABDA31C979E70AD4E94EDA99AB0DF982D.png'
        },
        {
          id: '5',
          url: 'https://res.vmallres.com/pimages//product/6901443391943/group//428_428_DF14AFDDA08B315AA7E7DF12C2133BED9826E66CDD9462A4.png'
        },
        {
          id: '6',
          url: 'https://res.vmallres.com/pimages//product/6901443391943/group//428_428_DEFC7C99C54D1B65C1EC00A834BF00AE2303C98C8AF79E76.png'
        },
        {
          id: '7',
          url: 'https://res.vmallres.com/pimages//product/6901443391943/group//428_428_5D8EDCCD009B3053643DA58B7913E924564721606FC72B34.png'
        }
      ],
      product: {
        name: '荣耀30 50倍超稳远摄 超感光高清夜拍 40W超级快充 双模5G',
        colors: [
          {
            id: 1,
            name: '幻夜黑',
            skuids: ['1','2','3']
          },
          {
            id: 2,
            name: '绿野仙踪',
            skuids: ['1','2','3']
          },
          {
            id: 3,
            name: '钛空银',
            skuids: ['1','2','3']
          },
          {
            id: 4,
            name: '霓影紫',
            skuids: ['1','2','3']
          },
          {
            id: 5,
            name: '流光幻镜',
            skuids: ['2','3']
          }
        ],
        versions: [
          {
            id: 1,
            netName: '全网通',
            memeny: '6GB+128GB',
            orginPrice: 2999,
            price: 2699
          },
          {
            id: 2,
            netName: '全网通',
            memeny: '8GB+128GB',
            orginPrice: 3199,
            price: 2999
          },
          {
            id: 3,
            netName: '全网通',
            memeny: '8GB+256GB',
            orginPrice: 3499,
            price: 3299
          }
        ],
        couponCodeData: [
          {
            activityCode: "C5S4873AOXV7BO6O17",
            batchName: "【华为商城】荣耀手机 10元优惠券",
            beginDate: 1595433600000,
            endDate: 1596211199000,
          }
        ],
        promotion: [
          {
            id: 1,
            name: '限时特价',
            detail: '限时直降200元'
          },
          {
            id: 2,
            name: '一站式换新',
            detail: 'APP专享，最高补贴300元'
          },
          {
            id: 3,
            name: '限量送',
            detail: '10/12/14/16/20/22点下单前100限量送荣耀手环4 Running版（荣耀指定手机共享）'
          },
          {
            id: 4,
            name: '会员限量送',
            detail: 'V1及以上会员限量赠耳机'
          },
          {
            id: 5,
            name: '商品赠券',
            detail: '支付后赠送荣耀手表2 50元优惠券'
          },
          {
            id: 6,
            name: '分期免息',
            detail: '花呗、掌上生活、工行、农行、银联、工行融e购分期支付可享免息',
            subscribe: '免息活动适用于单款免息商品订单，含多款商品订单仅在免息活动一致时可享用'
          },
          {
            id: 7,
            name: '赠送积分',
            detail: '购买即赠商城积分，积分可抵现',
          },
        ],
        bundlerList: [
          {
            id: 1,
            name: '单品',
            goods: []
          },
          {
            id: 2,
            name: '音乐套餐一',
            price: 3228,
            disCount: 270,
            goods: [
              {
                id: 1,
                name: '荣耀FlyPods青春版 真无线耳机',
                subName: '',
                colors: [
                  {
                    id: 1,
                    name: '铃兰白',
                  },
                  {
                    id: 2,
                    name: '知更鸟蓝',
                  },
                  {
                    id: 3,
                    name: '幻夜黑',
                  }
                ]
              }
            ]
          },
          {
            id: 3,
            name: '音乐套餐二',
            price: 3298,
            disCount: 300,
            goods: [
              {
                id: 1,
                name: '荣耀xSport PRO 蓝牙耳机',
                subName: '李现同款',
                colors: [
                  {
                    id: 1,
                    name: '海鸥灰',
                  },
                  {
                    id: 2,
                    name: '星云紫',
                  },
                  {
                    id: 3,
                    name: '魅焰红',
                  }
                ]
              }
            ]
          }
        ],
        service: [
          {
            id: 1,
            name: '碎屏险',
            lists: [
              {
                id: 1,
                name: '碎屏(含后盖)服务宝1年',
                price: '224',
                oPrice: '249'
              }
            ]
          },
          {
            id: 2,
            name: '延长保',
            lists: [
              {
                id: 1,
                name: '延长服务宝1年',
                price: '168',
                oPrice: ''
              },
              {
                id: 2,
                name: '延长服务宝半年',
                price: '138',
                oPrice: ''
              }
            ]
          }
        ],
        dapei: [
          {
            id: 1,
            name: '荣耀30 PC保护壳',
            price: '59',
            oPrice: '99',
            colors: [
              {
                id: 1,
                name: '紫色',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443376216/142_142_226F2A2E8F253CE518F62D24B5E3145D666917F02576C263mp.jpg',
              },
              {
                id: 2,
                name: '冰川白',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443376223/142_142_E65EE3AAAC6A72F98C2906559300825F2969E6728CEE3731mp.jpg',
              },
              {
                id: 3,
                name: '绿色',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443376209/142_142_976D9C14B21B82F55A2A442CE4F798F3D46C3107F8478057mp.jpg',
              },
              {
                id: 4,
                name: '黑色',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443376186/142_142_798EF0F1AAC6219FD0C66EDD910AC934160938B3BA3326D1mp.jpg',
              }
            ]
          },
          {
            id: 2,
            name: '荣耀 FlyPods 3真无线耳机',
            price: '599',
            oPrice: '799',
            colors: [
              {
                id: 1,
                name: '铃兰白',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443364848/142_142_FD4FCDA05CD9734500C1F30C2224781613DD08967CC7194Emp.png',
              },
              {
                id: 2,
                name: '知更鸟蓝',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443364855/142_142_FE5BED3114CBE33A6F3FFAC328E746649B03226BB05CF23Dmp.png',
              }
            ]
          },
          {
            id: 3,
            name: '荣耀手表2 运动款MagicWatch',
            price: '899',
            oPrice: '1199',
            colors: [
              {
                id: 1,
                name: '46mm 碳石黑',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443357949/142_142_909881D6BCBF027F47EEF3EF6AA5D8407613AA8228980DF8mp.png',
              }
            ]
          },
          {
            id: 4,
            name: '荣耀经典耳机 USB Type-c版',
            price: '79',
            oPrice: '99',
            colors: [
              {
                id: 1,
                name: '白色',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443257300/142_142_DF26D53CFCC9864B0FD242CE15CDC20FBC5D9DB0C5F2AC04mp.png',
              }
            ]
          },
          {
            id: 5,
            name: '荣耀xSport 运动蓝牙耳机',
            price: '159',
            oPrice: '249',
            colors: [
              {
                id: 1,
                name: '魅焰红',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443289844/142_142_52692BC62D76B2EC4DC7B4F5A309D0EA408F94A7C669A198mp.png',
              }
            ]
          },
          {
            id: 6,
            name: '荣耀手环 5 标准版',
            price: '149',
            oPrice: '189',
            colors: [
              {
                id: 1,
                name: '陨石黑',
                imgUrl: 'https://res.vmallres.com/pimages//product/6901443310593/142_142_1562750353603mp.png',
              }
            ]
          }
        ]
      },
      prdDetailInfo: '',
      countTimeObj: {
        day: '0' + '天',
        hour: '00',
        min: '00',
        sec: '00',
      },
      goodsNum: 1,
      commentInfo: {}, // 评价
      showMoreComment: false, // 是否显示更多好评
      specificationsList: [], // 规格参数
      showContent: [], // 显示的参数
    }
  },
  methods: {
    // 获取详情数据
    async getPrdDetailInfo(){
      let data = await this.$http.get('../../../../static/mock/prdDetailInfo.json');
      this.prdDetailInfo = data.prdDetailInfo;
    },
    backClick(){
      if (this.showMoreComment) {
        this.showMoreComment = false;
      } else {
        this.$router.back();
      }
    },
    // 便签点击事件
    tabsItemClick(index){
      this.activeIndex = index;
      console.log('tabsItemClick = ',index)
    },
    // 显示菜单 
    showMenuBtnClick(){
      this.showMenu = !this.showMenu;
    },
    // 菜单点击事件
    menuItemClick(index){

    },
    handleScroll(){      
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   
      console.log('scrollTop = ',scrollTop);    
      let alp  = scrollTop >= 200 ? 1 : scrollTop/100;
      this.isShow = scrollTop >= 200 ? true : false;
      this.headerOpacity = {backgroundColor: 'rgba(255, 255, 255,' + scrollTop/100 + ')'};
      this.showMenu = false;
    },
    // 商品加减按钮点击事件
    numBtnClick(type){
      switch (type) {
        case 'minus':
          if (this.goodsNum === 1) {
            return
          }
          this.goodsNum = this.goodsNum - 1;
          break;
        case 'add':
          if (this.goodsNum === 20) {
            return
          }
          this.goodsNum = this.goodsNum + 1;
          break;
        default:
          break;
      }
    },
    // 查看更多好评
    moreClick(){
      this.showMoreComment = true;
      if (this.showMoreComment) {
        this.headerOpacity = {backgroundColor: 'rgba(255, 255, 255, 1)'};
      }
    },
    // 获取评价数据
    async getCommentList(){
      let res = await this.$http.get('../../../../static/mock/getCommentList.json');
      this.commentInfo = res.data;
    },
    // 获取规格数据
    async getPrdAttributes(){
      let res = await this.$http.get('../../../../static/mock/prdAttributes.json');
      this.specificationsList = res.specificationsList[0].specifications;
      this.showContent = this.specificationsList[2].content;
    },
    // 倒计时
    countTime(){
      // https://www.cnblogs.com/maqingyuan/p/8452012.html
      //获取当前时间
      let date = new Date();
      let now = date.getTime();
      //设置截止时间
      let str="2020/8/30 00:00:00";
      let endDate = new Date(str);
      let end = endDate.getTime();

      //时间差
      let leftTime = end-now;
      //定义变量 h,m,s保存倒计时的时间
      let d,h,m,s;
      if (leftTime>=0) {
          d = Math.floor(leftTime/1000/60/60/24);
          h = Math.floor(leftTime/1000/60/60%24);
          m = Math.floor(leftTime/1000/60%60);
          s = Math.floor(leftTime/1000%60);
      }
      //将0-9的数字前面加上0，例1变为01
      d = this.checkTime(d);
      h = this.checkTime(h);
      m = this.checkTime(m);
      s = this.checkTime(s);
      // this.countTimeStr = d+ '天' + h +":" + m +":" + s;
      this.countTimeObj = {
        day: d+ '天',
        hour: h,
        min: m,
        sec: s
      }
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime,1000);
    },
    checkTime(i){
      if (i<10) {
        i = "0"+i;
      }
      return i;
    }
  },
  mounted() {
    this.getPrdDetailInfo();
    this.getCommentList();
    this.getPrdAttributes();
    window.addEventListener('scroll',this.handleScroll);
    this.countTime();
  }
}
</script>

<style scoped lang="scss">
.detail{
  .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 17px 32px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    .back{
      background-image: url(../../../../static/images/icon_back_grey.png);
    }
    .more{
      background-image: url(../../../../static/images/icon_more_grey.png);
    }
    .bg50{
      width: 50px;
      height: 50px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 50px 50px;
    }
    .title{
      color: #191919;
      font-size: 36px;
    }
  }
  .header1{
    .back{
      background-image: url(../../../../static/images/icon_black_1.png);
    }
    .more{
      background-image: url(../../../../static/images/icon_header_nav.png);
    }
    .tabs{
      width: 400px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      a{
        color: #191919;
        position: relative;
        text-decoration: none;
      }
      .active{
        color: #ca141d;
        &::before{
          content: "";
          position: absolute;
          bottom: -2px;
          left: 6px;
          width: 50px;
          height: 4px;
          border-radius: 2px;
          background-color: #ca141d;
        }
      }
    }
  }
  .headerMenu{
    top: 100px;
    right: 20px;
    position: fixed;
    width: 216px;
    background-color: #fff;
    box-shadow: 0rem 0rem 0.25rem 0rem rgba(0,0,0,.1);
    border-radius: 10px;
    z-index: 10x;
    div{
      height: 88px;
      color: #333;
      border-bottom: 1px solid rgba(213,213,213,.5);
      text-align: left;
      padding-left: 30px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      label{
        display: block;
        line-height: 94px;
      }
      span{
        display: block;
        width: 50px;
        height: 88px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 50px 50px;
        margin-right: 20px;
      }
      &:last-of-type{
        border-bottom: none;
      }
      &:nth-of-type(1){
        span{
          background-image: url(../../../../static/images/icon-home-black.png);
        }
      }
      &:nth-of-type(2){
        span{
          background-image: url(../../../../static/images/icon_search_black.png);
        }
      }
      &:nth-of-type(3){
        span{
          background-image: url(../../../../static/images/icon_menu_category_black.png);
        }
      }
      &:nth-of-type(4){
        span{
          background-image: url(../../../../static/images/icon_cart_black.png);
        }
      }
      &:nth-of-type(5){
        span{
          background-image: url(../../../../static/images/icon_person_black.png);
        }
      }
    }
  }
  .content{
    z-index: 5;
    .swiper{
      width: 100%;
      height: 700px;
      img{
        width: 100%;
        height: 700px;
      }
    }
    .product{
      height: auto;
      text-align: left;
      .baseInfo{
        .line_price{
          height: 108px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          background: -webkit-linear-gradient(left, #ff3950, #ffcd35);
          .left{
            text-align: left;
            width: 65%;
            padding-left: 32px;
            padding-top: 10px;
            color: white;
            .price{
              font-size: 36px;
              font-weight: bold;
              span{
                font-size: 30px;
              }
            }
            .old_price{
              margin-top: 6px;
              font-size: 24px;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              flex-wrap: nowrap;
              .tag{
                border: solid 1px white;
                text-align: center;
                padding: 2px 12px;
                height: 28px;
                line-height: 30px;
                border-radius: 18px;
              }
              .num{
                line-height: 38px;
                margin-left: 10px;
                text-decoration: line-through;
              }
            }
          }
          .right{
            background-color: rgba(255,255,255,.9);
            width: 35%;
            color: #ff6f3d;
            font-size: 24px;
            .name{
              padding-top: 16px;
            }
            .time{
              display: flex;
              flex-direction: row;
              justify-content: center;
              flex-wrap: nowrap;
              margin-top: 8px;
              .day{
                margin-right: 6px;
              }
              .hour,.min,.sec{
                color: white;
                background-color: #ff6f3d;
                width: 32px;
                height: 34px;
                line-height: 36px;
                border-radius: 4px;
              }
              .dot{
                width: 16px;
                height: 34px;
                line-height: 36px;
              }
            }
          }
        }
        .line_title{
          padding: 20px 32px 10px;
          .title{
            color: #333;
            font-size: 34px;
            font-weight: 600;
            margin-bottom: 10px;
          }
          .prom{
            font-size: 24px;
            color: #ca151e;
          }
        }
        .line_right{
          margin-left: 32px;
          padding-right: 32px;
          border-bottom: 1px solid rgba(234,234,234,.5);
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          font-size: 24px;
          .title{
            min-height: 60px;
            padding-top: 20px;
            color: #333;
            font-weight: bold;
            margin-right: 40px;
          }
          .center{
            overflow: hidden;
            width: 500px;
            .item.active{
              border-color: #ca151e;
              color: #ca151e;
            }
          }
          .more{
            cursor: pointer;
            width: 50px;
            height: 50px;
            margin-top: 15px;
            margin-left: auto;
            background-image: url(../../../../static/images/icon-more-right.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 50px 50px;
          }
          .more2{
            cursor: pointer;
            width: 25px;
            height: 50px;
            margin-top: 15px;
            margin-left: auto;
            background-image: url(../../../../static/images/icon-more-arrow-1.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 25px 50px;
          }
        }
        .couponList{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          padding-top: 20px;
          overflow: hidden;
          .item{
            color: white;
            text-align: center;
            background-image: url(../../../../static/images/icon_coupon_new.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 150px 36px;
            width: 150px;
            height: 36px;
            margin-right: 10px;
          }
        }
        .bottomBorderNone{
          border-bottom: none;
        }
        .cuxiaoList{
          padding-top: 20px;
          padding-bottom: 20px;
          overflow: hidden;
          .item{
            color: #333;
            text-align: center;
            margin-right: 10px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            margin-bottom: 10px;
            .tag{
              border: 1px solid rgba(239,90,98,.5);
              color: #ef5a62;
              margin-right: 10px;
              padding: 0 10px;
              border-radius: 20px;
              span{
                display: inline-block;
                transform: scale(0.85)
              }
            }
            .text{
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              word-break: break-all;
            }
          }
        }
        .specLine{
          // margin-top: 20px;
          height: 20px;
          background-color: #f9f9f9;
        }
        .colors{
          margin-bottom: 20px;
          .colorsList{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 560px;
            .item{
              border: 1px solid rgba(178,178,178,.5);
              color: #333;
              padding: 0 25px;
              height: 48px;
              line-height: 48px;
              border-radius: 24px;
              margin-right: 20px;
              margin-top: 18px;
            }
          }
        }
        .setNum{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          margin-top: 15px;
          .num{
            width: 70px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
          }
          .btn{
            width: 50px;
            height: 50px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 0;
          }
          .minus{
            background-image: url(../../../../static/images/input_number_minus.png);
          }
          .add{
            background-image: url(../../../../static/images/input_number_add.png);
          }
          .disable{
            background-position: -50px 0;
          }
        }
        .baozhangList{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          padding: 16px 0;
          .tips{
            margin-right: 20px;
            height: 48px;
            line-height: 48px;
          }
          .item{
            border: 1px solid #eaeaea;
            border-radius: 6px;
            height: 48px;
            line-height: 48px;
            padding: 0 8px;
            margin-right: 10px;
          }
        }
        .mianxi{
          line-height: 78px;
        }
        .dapei{
          padding: 25px 32px 25px 0px;
          .title{
            height: 64px;
            padding-top: 30px;
          }
          .dapeiList{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            .item{
              width: 94px;
              height: 94px;
              position: relative;
              margin-right: 50px;
              &::after{
                content: '+';
                display: block;
                width: 50px;
                text-align: center;
                color: #999;
                position: absolute;
                left: 98px;
                top: 20px;
              }
              img{
                width: 94px;
                height: 94px;
              }
              div{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 94px;
                height: 30px;
                border-radius: 2px;
                text-align: center;
                background: rgba(242,242,242,.8);
                span{
                  display: inline-block;
                  transform: scale(0.85)
                }
              }
            }
          }
        }
        .service{
          padding: 25px 32px 25px 0px;
          .title{
            padding-top: 0;
          }
          .serviceList{
            .item{
              position: relative;
              padding-left: 40px;
              &::before{
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 26px;
                height: 26px;
                background-image: url(../../../../static/images/icon_discount.png);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 26px 26px;
              }
              &:first-of-type{
                margin-bottom: 10px;
              }
            }
          }
        }
        .recommend{
          padding: 25px 32px 25px 0px;
          .title{
            padding-top: 0px;
            line-height: 54px;
          }
          .recommendList{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            .item{
              height: 54px;
              line-height: 54px;
              text-align: center;
              background: #f3f3f3;
              padding: 0 20px;
              border-radius: 27px;
              margin-right: 20px;
            }
          }
        }
      }
      .commentInfo{
        padding-bottom: 30px;
        .line_title{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: nowrap;
          padding: 32px;
          .title{
            color: #333;
            font-weight: bold;
            font-size: 34px;
          }
          .goodRatebox{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            .num{
              color: #666;
              font-size: 26px;
              line-height: 48px;
              span{
                color: #ca141d;
                margin-right: 6px;
                font-weight: bold;
              }
              margin-right: 10px;
            }
            .more{
              cursor: pointer;
              width: 25px;
              height: 50px;
              margin-left: auto;
              background-image: url(../../../../static/images/icon-more-arrow-1.png);
              background-position: center center;
              background-repeat: no-repeat;
              background-size: 25px 50px;
            }
          }
        }
        .commentList{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-y: scroll;
          width: 100%;
          padding: 10px 0;
          &::-webkit-scrollbar{
            display: none;
          }
          .comment_more{
            .see_more{
              margin-right: 25px;
              height: 256px;
              width: 256px;
              background-color: #f7f7f7;
              position: relative;
              .icon{
                width: 38px;
                height: 38px;
                background-image: url(../../../../static/images/icon_more_1.png);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 38px 38px;
                position: absolute;
                left: 104px;
                top: 80px;
              }
              .text{
                color: #333;
                font-size: 24px;
                text-align: center;
                width: 100%;
                position: absolute;
                left: 0px;
                top: 130px;
              }
            }
          }
        }
        .moreBtns{
          display: flex;
          flex-direction: row;
          justify-content: center;
          flex-wrap: nowrap;
          padding-top: 22px;
          .btn{
            width: 250px;
            height: 62px;
            line-height: 62px;
            text-align: center;
            border: 1px solid #e0e0e0;
            border-radius: 31px;
            margin: 0 6px;
            font-size: 26px;
            color: #333;
          }
        }
      }
      .specLine{
        height: 40px;
        background-color: #f9f9f9;
        padding-top: 30px;
        .line{
          margin: auto;
          width: 450px;
          height: 12px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
          background-image: url(../../../../static/images/icon-line.png);
        }
      }
      .canshuInfo{
        padding: 0 32px 100px 32px;
        margin-bottom: 20px;
        position: relative;
        .headTitle{
          color: #333;
          font-weight: bold;
          font-size: 32px;
          padding: 32px 0;
        }
        .canshuBox{
          height: 250px;
          overflow: hidden;
          .line{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            margin-bottom: 25px;
            line-height: 30px;
            .name{
              color: #999;
            }
            .value{
              color: #333;
            }
          }
        }
        .mask{
          position: absolute;
          left: 0;
          right: 0;
          bottom: 10px;
          height: 280px;
          z-index: 2;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
          background-image: url(../../../../static/images/icon_mask_specify.png);
        }
        .moreInfo{
          z-index: 10;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 20px;
          border-radius: 31px;
          border: solid 1px #e0e0e0;
          width: 330px;
          height: 62px;
          line-height: 62px;
          text-align: center;
          margin: auto;
          font-size: 26px;
          color: #333;
        }
      }
      .detailInfo{
        height: auto;
      }
    }
  }
  .bottomArea{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: white;
    .linkBtns,.actionBtns{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
    }
    .linkBtns{
      div{
        width: 104px;
        background-position: center 10px;
        background-repeat: no-repeat;
        background-size: 50px 50px;
        color: #333;
        font-size: 24px;
        padding-top: 60px;
      }
      .home{
        background-image: url(../../../../static/images/icon-home-black.png);
      }
      .service{
        background-image: url(../../../../static/images/icon-service-black.png);
      }
      .shoppingCart{
        background-image: url(../../../../static/images/icon-cart-black.png);
      }
    }
    .actionBtns{
      padding: 10px 20px 10px 0;
      div{
        width: 210px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: white;
        font-size: 32px;
      }
      .addCart{
        background-image: linear-gradient(90deg,#ff814a 0,#f45333 100%);
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
      }
      .buyNow{
        background-image: linear-gradient(90deg,#e43e2d 0,#ca141d 100%);
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
      }
    }
  }
}
</style>

<style lang="scss">
.detail{
  .content{
    .product{
      height: auto;
      .detailInfo{
        height: auto;
        p{
          img{
            border: 0;
            max-width: 100%;
            height: auto;
            vertical-align: top;
          }
        }
      }
      .canshuInfo{
        .canshuBox{
          .line{
            font-size: 25px;
            .name{
              color: #999;
              width: 170px;
              margin-right: 4px;
            }
            .value{
              color: #333;
              width: 506px;
            }
          }
        }
      }
    }
  }
}
</style>
